<template>
    <div class="l-from-body" >
        <el-form :model="formData" :rules="rules" size="mini"  ref="form" label-width="80px" >
            <el-col :span="24">
                <el-form-item label="编码" prop="f_EnCode">
                    <el-input v-model="formData.f_EnCode"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="名称" prop="f_FullName">
                    <el-input v-model="formData.f_FullName"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="说明" prop="f_Description">
                    <el-input type="textarea" v-model="formData.f_Description"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24" style="padding-left:24px;" >
                <l-edit-table
                    :addBtnText="$t('添加规则')"
                    :dataSource="ruleFormat"
                    :isShowNum="false"

                    @addRow="handleAdd"
                    @deleteRow="handleDelete"

                    >
                    <el-table-column
                    prop="itemType"
                    label="前缀"
                    minWidth="120">
                        <template slot-scope="scope">
                            <l-select  
                                v-model="scope.row.itemType"
                                placeholder="请选择" 
                                size="mini"
                                :options="options"
                                @change="handleChange(scope.row)"
                                >
                            </l-select>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="formatStr"
                    label="格式"
                    width="140">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.itemType == '0'" size="mini" v-model="scope.row.formatStr" placeholder="请输入"></el-input>
                            <l-select
                                v-else-if="scope.row.itemType == '1'"
                                v-model="scope.row.formatStr"
                                placeholder="请选择" 
                                size="mini"
                                :options="optionsDate" 
                                >
                            </l-select>
                            <l-select
                                v-else-if="scope.row.itemType == '2'"
                                v-model="scope.row.formatStr"
                                placeholder="请选择" 
                                size="mini"
                                :options="optionsNumber" 
                                >
                            </l-select>
                            <l-select
                                v-else-if="scope.row.itemType == '3'"
                                v-model="scope.row.formatStr"
                                placeholder="请选择" 
                                size="mini"
                                :options="optionsCompany" 
                                >
                            </l-select>
                            <l-select
                                v-else-if="scope.row.itemType == '4'"
                                v-model="scope.row.formatStr"
                                placeholder="请选择" 
                                size="mini"
                                :options="optionsDepartment" 
                                >
                            </l-select>
                            <l-select
                                v-else-if="scope.row.itemType == '5'"
                                v-model="scope.row.formatStr"
                                placeholder="请选择" 
                                size="mini"
                                :options="optionsUser" 
                                >
                            </l-select>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="stepValue"
                    label="步长"
                    width="110">
                        <template v-if="scope.row.itemType == '2'" slot-scope="scope">
                            <el-input-number v-model="scope.row.stepValue"
                                placeholder="请输入"
                                size="mini"
                                :min="1"></el-input-number>
                        </template>
                    </el-table-column>
                     <el-table-column
                    prop="initValue"
                    label="初始值"
                    width="120">
                    <template  v-if="scope.row.itemType == '2'" slot-scope="scope">
                            <el-input-number v-model="scope.row.initValue"
                                placeholder="请输入"
                                size="mini"
                                :min="0"></el-input-number>
                    </template>
                    </el-table-column>
                </l-edit-table >
            </el-col>
        </el-form>
    </div>
</template>
<script>
export default {
    name:'coderule-form',
    props:{
    },
    data(){
        return {
            formData:{
                f_FullName:'',
                f_EnCode:'',
                f_Description:''
            },
            rules: {
                f_FullName: [
                    { required: true, message: '请输入编码' }
                ],
                f_EnCode: [
                    { required: true, message: '请输入名称' }
                ]
            },
            ruleFormat:[],
            options:[
                {value:'0',label:'自定义'},
                {value:'1',label:'日期'},
                {value:'2',label:'流水号'},
                {value:'3',label:'公司'},
                {value:'4',label:'部门'},
                {value:'5',label:'用户'}
            ],
            optionsDate:[
                {value:'mmdd',label:'mmdd'},
                {value:'ddmm',label:'ddmm'},
                {value:'mmyy',label:'mmyy'},
                {value:'yymm',label:'yymm'},
                {value:'yyyy',label:'yyyy'},
                {value:'yy',label:'yy'},
                {value:'yyyymm',label:'yyyymm'},
                {value:'yymmdd',label:'yymmdd'},
                {value:'yyyymmdd',label:'yyyymmdd'}
            ],
            optionsNumber:[
                {value:'000',label:'000'},
                {value:'0000',label:'0000'},
                {value:'00000',label:'00000'},
                {value:'000000',label:'000000'}
            ],
            optionsCompany:[
                {value:'code',label:'公司编号'},
                {value:'name',label:'公司名称'},
            ],
            optionsDepartment:[
                {value:'code',label:'部门编号'},
                {value:'name',label:'部门名称'},
            ],
            optionsUser:[
                {value:'code',label:'用户编号'},
                {value:'name',label:'用户名称'},
            ],

        };
    },
    computed:{
    },
    created () {
    },
    methods:{
        resetForm(){
            this.formData.F_RuleId = ''
            this.ruleFormat = []
            this.$refs.form && this.$refs.form.resetFields()
        },
        // 校验表单
        validateForm(callback){
            this.$refs.form.validate((valid) => {
                if(valid){
                    if(this.ruleFormat.length >0){
                        let r = this.ruleFormat.find(t=>t.itemType == '' || t.formatStr == '' );
                        if(r){
                            this.$message({
                                type: 'warning',
                                message: '请完善规则信息!'
                            });
                        }
                        else{
                            callback();
                        }
                    }
                    else{
                        this.$message({
                            type: 'warning',
                            message: '请设置规则!'
                        });
                    }
                }
            });
        },
        setForm(data){
            this.formData = this.$deepClone(data);
            this.formData.f_RuleFormatJson && (this.ruleFormat = JSON.parse(this.formData.f_RuleFormatJson));
        },
        getForm(){
            let formData = this.$deepClone(this.formData);
            formData.f_RuleFormatJson = JSON.stringify(this.ruleFormat);
            return formData;
        },
        handleAdd(){
            this.ruleFormat.push({itemType:'',formatStr:'',stepValue:1,initValue:0});
        },
        handleDelete(data){
            this.ruleFormat.splice(data.index,1);
        },

        handleChange(row){
            row.formatStr = '';
        }
    }
}
</script>